<template>
  <div class="container">
    <div class="watermark">众创空间退出申请表</div>

    <div class="header">
      <h1>桂林电子科技大学科技园众创空间退出申请表</h1>
      <div class="no">NO.</div>
    </div>

    <table>
      <colgroup>
        <col style="width: 15%">
        <col style="width: 10%">
        <col style="width: 8%">
        <col style="width: 8%">
        <col style="width: 5%">
        <col style="width: 8%">
        <col style="width: 5%">
        <col style="width: 5%">
        <col style="width: 5%">
        <col style="width: 31%">
      </colgroup>

      <tr>
        <td class="title-cell">企业/团队</td>
        <td colspan="6">
          <input type="text" v-model="form.enterpriseTeam"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
        <td colspan="2" class="title-cell">退出时间</td>
        <td>
          <input type="text" :value="formatDate(form.exitTime)"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
      </tr>

      <tr>
        <td class="title-cell">房号及卡座号</td>
        <td colspan="2">
          <input type="text" v-model="form.roomNumber"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
        <td colspan="2" class="title-cell">经办人</td>
        <td colspan="2">
          <input type="text" v-model="form.contactPerson"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
        <td colspan="2" class="title-cell">联系方式</td>
        <td>
          <input type="text" v-model="form.contactMethod"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
      </tr>

      <tr>
        <td class="title-cell">退出原因</td>
        <td colspan="9">
          <div class="checkbox-group">
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.exitReasons.includes('合同期满退出')}">✓</span>
              <span class="checkbox-label">合同期满退出</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.exitReasons.includes('团队申请退出')}">✓</span>
              <span class="checkbox-label">团队申请退出</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.exitReasons.includes('毕业两年退出')}">✓</span>
              <span class="checkbox-label">毕业两年退出</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.exitReasons.includes('清理退出')}">✓</span>
              <span class="checkbox-label">清理退出</span>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="title-cell" rowspan="4">退出后续事宜办理情况</td>
        <td class="title-cell">门禁指纹是否清除</td>
        <td colspan="8">
          <div class="checkbox-group">
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.accessControlCleared === true || form.accessControlCleared === 'true'}">✓</span>
              <span class="checkbox-label">是</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.accessControlCleared === false || form.accessControlCleared === 'false'}">✓</span>
              <span class="checkbox-label">否</span>
            </div>
          </div>
        </td>
      </tr>

      <tr>
        <td class="title-cell">公司物品是否清出</td>
        <td colspan="8">
          <div class="checkbox-group">
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.companyItemsCleared === true || form.companyItemsCleared === 'true'}">✓</span>
              <span class="checkbox-label">是</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.companyItemsCleared === false || form.companyItemsCleared === 'false'}">✓</span>
              <span class="checkbox-label">否</span>
            </div>
          </div>
        </td>
      </tr>

      <tr>
        <td class="title-cell">公司注册地址是否迁移</td>
        <td colspan="8">
          <div class="checkbox-group">
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.registrationAddressMigrated === true || form.registrationAddressMigrated === 'true'}">✓</span>
              <span class="checkbox-label">是</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.registrationAddressMigrated === false || form.registrationAddressMigrated === 'false'}">✓</span>
              <span class="checkbox-label">否</span>
            </div>
          </div>
        </td>
      </tr>

      <tr>
        <td class="title-cell">公司是否注销</td>
        <td colspan="8">
          <div class="checkbox-group">
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.companyDeregistered === true || form.companyDeregistered === 'true'}">✓</span>
              <span class="checkbox-label">是</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.companyDeregistered === false || form.companyDeregistered === 'false'}">✓</span>
              <span class="checkbox-label">否</span>
            </div>
          </div>
        </td>
      </tr>

      <tr>
        <td class="title-cell">已缴纳保证金金额</td>
        <td class="title-cell">￥</td>
        <td colspan="3">
          <input type="number" step="0.01" v-model.number="form.depositPaid" min="0"
                 style="width:100%; border:none; text-align:center;" readonly>


        </td>
        <td colspan="2" class="title-cell">大写：</td>
        <td colspan="3">
          <input type="text" :value="toChineseCurrency(form.depositPaid)"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
      </tr>

      <tr>
        <td class="title-cell">应退保证金金额</td>
        <td class="title-cell">￥</td>
        <td colspan="3">
          <input type="number" step="0.01" v-model.number="form.depositRefundable" min="0"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
        <td colspan="2" class="title-cell">大写：</td>
        <td colspan="3">
          <input type="text" :value="toChineseCurrency(form.depositRefundable)"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
      </tr>

      <tr>
        <td class="title-cell" rowspan="3">退款账户明细</td>
        <td class="title-cell">户名</td>
        <td colspan="8">
          <input type="text" v-model="form.refundAccountName"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
      </tr>

      <tr>
        <td class="title-cell">账号</td>
        <td colspan="8">
          <input type="text" v-model="form.refundAccountNumber"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
      </tr>

      <tr>
        <td class="title-cell">开户行</td>
        <td colspan="8">
          <input type="text" v-model="form.refundBank"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
      </tr>

      <tr>
        <td class="title-cell" rowspan="2">申请人签字</td>

        <td class="title-cell">年 月 日</td>
        <td colspan="8">
          <input type="text" v-model="form.applicantSignatureDate"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>

      </tr>

      <tr><td colspan="9">
          <input type="text" v-model="form.applicantSignature"
                 style="width:100%; border:none; text-align:center;" readonly>
      </td>
      </tr>

      <tr>
        <td class="title-cell" colspan="10">科技园审批（以下内容由科技园填写）</td>
      </tr>
      <tr>
        <td class="title-cell">应退款</td>
        <td class="title-cell">￥</td>
        <td colspan="3">
          <input type="text" :value="form.refundAmount || ''"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
        <td colspan="2" class="title-cell">（大写：）</td>
        <td colspan="3">
          <input type="text" :value="form.refundAmount ? toChineseCurrency(form.refundAmount) : ''"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
      </tr>

      <tr>
        <td class="title-cell">经办人</td>
        <td colspan="4">
          <input type="text" v-model="form.handler"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
        <td class="title-cell" colspan="2">办公室主任核签</td>
        <td colspan="4">
          <input type="text" v-model="form.officeDirectorSignature"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
      </tr>

      <tr>
        <td class="title-cell" rowspan="2">部门负责人意见</td>
        <td colspan="8" rowspan="2">
          <input type="text" v-model="form.departmentHeadOpinion"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
      </tr>
      <tr>
        <td class="title-cell">年 月 日</td>
        <td colspan="8">
          <input type="date" v-model="form.departmentHeadSignatureDate"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
      </tr>
    </table>

    <div class="tip-box">
      <p>温馨提示：</p>
      <p>1. 请于退出之日起一周内从众创空间清出本公司物品，逾期将按废弃物处理；</p>
      <p>2. 未办理公司注册地址迁移的于一个月内办理相关事宜。</p>
    </div>
  </div>


  <div class="print-controls">
    <button class="print-btn" onclick="window.print()" style="">打印表格</button>
    <p class="print-tip">打印前请确保：1. 浏览器设置中启用了背景图形打印 2. 纸张方向为纵向 3. 页边距设置为默认</p>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted , nextTick} from 'vue';
import { ElMessage } from 'element-plus';
import { getexitexitCreateSpaceForm } from '@/api/personal-center';
import { useRoute } from 'vue-router';
import type { AjaxResult } from '@/types/resultTypes';

const route = useRoute();
const form = reactive({
  id: null,
  userId: null,
  enterpriseTeam: '',
  roomNumber: '',
  contactPerson: '',
  contactMethod: '',
  exitReason: '',
  exitTime: null,
  accessControlCleared: null,
  companyItemsCleared: null,
  registrationAddressMigrated: null,
  companyDeregistered: null,
  depositPaid: null,
  depositRefundable: null,
  refundAccountName: '',
  refundAccountNumber: '',
  refundBank: '',
  applicantSignature: '',
  applicantSignatureDate: null,
  refundAmount: null,
  handler: '',
  departmentHeadOpinion: '',
  departmentHeadSignatureDate: null,
  exitReasons: [] as string[],
  officeDirectorSignature: ''
});

// 格式化日期
const formatDate = (date: string | number | Date | null | undefined) => {
  if (!date) return '';
  const d = new Date(date);
  return d.toISOString().split('T')[0];
};

// 数字转大写金额
const toChineseCurrency = (num: any) => {
  if (num === null || num === undefined || num === '') return '';
  if (num === 0) return '零元整';
  const chineseNum = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
  const chineseUnit = ['', '拾', '佰', '仟'];
  const bigUnit = ['', '万', '亿', '兆'];
  const result = [];
  let fraction = ['角', '分'];
  let numStr = num.toString().split('.');
  let integerPart = numStr[0];
  let fractionPart = numStr.length > 1 ? numStr[1] : '';
  let temp = '';
  for (let i = 0; i < integerPart.length; i++) {
    let n = integerPart.length - i - 1;
    let unit = '';
    if (n % 4 === 0 && n !== 0 && i !== 0) {
      unit = bigUnit[n / 4 - 1];
    } else if (n % 4 > 0) {
      unit = chineseUnit[n % 4];
    }
    if (integerPart[i] !== '0') {
      temp = chineseNum[parseInt(integerPart[i])] + unit;
    } else if (temp !== '零') {
      temp = '零';
    }
    if (temp !== '零' || result[result.length - 1] !== '零') {
      result.push(temp);
    }
  }
  if (result[result.length - 1] === '零') {
    result.pop();
  }
  result.push('元');
  for (let i = 0; i < fractionPart.length && i < 2; i++) {
    if (fractionPart[i] !== '0') {
      result.push(chineseNum[parseInt(fractionPart[i])] + fraction[i]);
    }
  }
  if (result[result.length - 1] === '元') {
    result.push('整');
  }
  return result.join('');
};

// 页面加载时获取用户草稿
onMounted(() => {
  const id = route.query.id;
  if (id) {
    getUserDraft(Number(id)).then(() => {
      nextTick(() => {
        setTimeout(() => {
          window.print();
        }, 500);
      });
    });
  }
});


const getUserDraft = async (id: number) => {
  try {
    const res = await getexitexitCreateSpaceForm(id) as unknown as AjaxResult<any>;
    if (res.code === 200) {
      console.log('API响应数据:', res.data);

      // 处理退出原因字段，将字符串转换为数组
      if (res.data.exitReason && typeof res.data.exitReason === 'string') {
        res.data.exitReasons = res.data.exitReason.split(',');
      }

      // 处理布尔值字段，确保是字符串格式
      if (res.data.accessControlCleared !== undefined) {
        res.data.accessControlCleared = String(res.data.accessControlCleared);
        console.log('门禁指纹是否清除:', res.data.accessControlCleared);
      }
      if (res.data.companyItemsCleared !== undefined) {
        res.data.companyItemsCleared = String(res.data.companyItemsCleared);
        console.log('公司物品是否清出:', res.data.companyItemsCleared);
      }
      if (res.data.registrationAddressMigrated !== undefined) {
        res.data.registrationAddressMigrated = String(res.data.registrationAddressMigrated);
        console.log('公司注册地址是否迁移:', res.data.registrationAddressMigrated);
      }
      if (res.data.companyDeregistered !== undefined) {
        res.data.companyDeregistered = String(res.data.companyDeregistered);
        console.log('公司是否注销:', res.data.companyDeregistered);
      }
      // 赋值表单数据
      Object.assign(form, res.data);
      //  这样打印右上角有加载的圈圈
      // // 使用 nextTick 等待 DOM 完成更新
      // await nextTick();
      //
      // // 此时页面已加载完毕，再调用打印
      // printTable();

      console.log('绑定后的表单数据:', form);
    }
  } catch (error) {
    console.error('获取报表数据失败:', error);
    ElMessage.error('获取报表数据失败');
  }
};
const printTable = () => {
  window.print();
};

</script>

<style  lang="scss" scoped>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Microsoft YaHei", Arial, sans-serif;
}
body {
  padding: 20px;
  background-color: #f5f5f5;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}


.el-radio__inner {
  background-color: black;
  border-color: black ;
}
.container {
  max-width: 800px;
  margin: 0 auto;
  background-color: white;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-size: 80px;
  color: rgba(0, 0, 0, 0.05);
  z-index: -1;
  font-weight: bold;
  text-transform: uppercase;
}
.header {
  text-align: center;
  margin-bottom: 20px;
}
.header h1 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
  letter-spacing: 2px;
}
.header .no {
  text-align: right;
  font-size: 16px;
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  margin-bottom: 20px;
}
td {
  border: 1px solid #000;
  height: 30px;
  padding: 4px 6px;
  vertical-align: top;
  word-break: break-all;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-bold {
  font-weight: bold;
}
.title-cell {
  font-weight: bold;
  text-align: center;
}
.vertical-text {
  writing-mode: vertical-lr;
  text-align: center;
  margin: 0 auto;
  letter-spacing: 8px;
}
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.checkbox-item {
  display: flex;
  align-items: center;
  margin-right: 10px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
}
.checkbox-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  padding: 2px 4px;
  margin: -2px 6px -2px -4px;
}
.checkbox {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #000;
  margin-right: 4px;
  text-align: center;
  line-height: 12px;
  font-size: 10px;
  font-weight: bold;
  color: transparent;
  position: relative;
  cursor: pointer;
}
.checkbox.checked {
  color: #000;
  background-color: #fff;
}
.checkbox-label {
  font-size: 14px;
  margin-left: 2px;
  cursor: pointer;
}
.tip-box {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 15px;
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.6;
}
.tip-box p {
  margin-bottom: 10px;
}
.signature {
  text-align: right;
  padding-right: 20px;
  margin-top: 20px;
}
.print-controls {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;      /* 垂直居中（可选） */
  margin: 20px 0;
}

.print-btn {
  background: #1e88e5;
  color: white;
  border: none;
  padding: 10px 25px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  margin-bottom: 10px;
}
.print-btn:hover {
  background: #0d47a1;
}
.print-tip {
  margin-top: 10px;
  color: #d32f2f;
  font-size: 14px;
}
@media print {
  body {
    padding: 0;
    background: none;
  }
  .container {
    box-shadow: none;
    padding: 0;
    max-width: 100%;
    margin: 0;
  }
  .print-controls {
    display: none;
  }
  .watermark {
    display: none;
  }
  input[readonly],
  textarea[readonly] {
    background-color: transparent !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .checkbox-item.disabled {
    opacity: 1 !important;
  }
}

.checkbox-item.disabled {
  opacity: 0.6;
  cursor: not-allowed !important;
}

.checkbox-item.disabled:hover {
  background-color: transparent !important;
}

.checkbox-item.disabled .checkbox {
  cursor: not-allowed !important;
}

.checkbox-item.disabled .checkbox-label {
  cursor: not-allowed !important;
}

/* 只读状态下的输入框样式 */
input[readonly],
textarea[readonly] {
  background-color: #f9f9f9 !important;
  color: #333 !important;
  cursor: default !important;
  user-select: none !important;
}
</style>
